<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
        <div id="main" style="width: 900px;height:600px;"></div>
        <script>
            var myChart=echarts.init(document.getElementById('main'));
            var option={
                title:{
                    text:'某站点用户访问来源',
                    subtext:'村属虚构',
                    x:'center'
                },
                tooltip:{
                    trigger:'item',
                    formatter:"{a}<br/>{b}:{c} ({d}%)"
                },
                legend:{
                    orient:'vertical',
                    left:'left',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series:[
                    {
                        name:'访问来源',
                        type:'pie',
                        radius:'55%',
                        center:['50%','60%'],
                        data:[
                            {value:335,name:'直接访问'},
                            {value:310,name:'邮件营销'},
                            {value:234,name:'联盟广告'},
                            {value:135,name:'视频广告'},
                            {value:1548,name:'搜索引擎'}
                        ]
                    }
                ]
            }
            myChart.setOption(option);
        </script>
    
</body>
</html>